<template>
	<view>
		<cu-custom bgColor="bg-red" :isBack="true">		<block slot="backText"></block>
			<block slot="content">填写发票</block>
		</cu-custom>
		<view class="bg-white margin radius">
			<view class="cu-form-group">
				<view class="title">发票类型</view>
				<radio-group class="block" @change="TypeRadioChange">
					<view class="cu-form-group margin-top">
						<radio :class="formData.type==1?'checked':''" :checked="formData.type==1?true:false" value="1">公司</radio>
						<radio class="margin-left" :class="formData.type==2?'checked':''" :checked="formData.type==2?true:false" value="2">个人</radio>
					</view>
				</radio-group>
			</view>
			<view class="cu-form-group">
				<view class="title">发票抬头</view>
				<input placeholder-class="input-holder" placeholder="请输入发票抬头" v-model="formData.title"></input>
			</view>
			<view class="cu-form-group" v-if="formData.type==1">
				<view class="title">发票税号</view>
				<input placeholder-class="input-holder" placeholder="请输入发票税号" v-model="formData.duty_paragraph"></input>
			</view>
		</view>
		<view class="bg-white margin-lr radius">
			<view class="cu-form-group">
				<view class="title">是否默认：</view>
				<switch @change="SwitchChange" :class="formData.is_default?'checked':''" :checked="formData.is_default?true:false"></switch>
			</view>
		</view>
		<view class="margin-xl">
			<view class="cu-btn w100 bg-orange round lg" @tap="onSubmit">确认提交</view>
		</view>
		<view class="tips">请仔细检查是否有误，确认后</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				txt: '请选择',
				formData: {
					type: 1,
					title: '',
					duty_paragraph: '',
					is_default: 0
				},
				id: 0,
				CLOUDPATH: this.$config.cloudPath
			}
		},
		onLoad(options) {
			if (options.id) {
				let detail = this.$common.getCache('invoice_edit')
				if (!detail) {
					this.$common.showErrorModal('参数有误')
					return
				}
				this.formData.title = detail.title
				this.formData.type = detail.type
				this.formData.is_default = detail.is_default
				this.id = detail.id
			}
		},
		methods: {
			TypeRadioChange(e) {
				this.formData.type = e.detail.value
			},
			SwitchChange(e) {
				if (e.detail.value) {
					this.formData.is_default = 1
				} else this.formData.is_default = 0
			},
			onSubmit(e) {
				let formData = this.formData

				if (!formData.title.trim()) {
					this.$common.showError('发票抬头不能为空')
					return
				}
				let id = this.id
				uni.showLoading({
					title: '加载中...'
				})
				if (id) {
					this.$http
						.put('invoice_update', formData, {id:id})
						.then((response) => {
							this.$common.rmCache('invoice_list')
							uni.hideLoading()
							this.$common.showSuccess('提交成功', function() {
								uni.navigateBack({})
							})
						})
						.catch((response) => {
							console.log(response)
						})
				} else {
					this.$http
						.post('invoice_create', formData)
						.then((response) => {
							console.log(response)
							this.$common.rmCache('invoice_list')
							uni.hideLoading()
							this.$common.showSuccess('提交成功', function() {
								uni.navigateBack({})
							})
						})
						.catch((response) => {
							console.log(response)
						})
				}
			}
		}
	}
</script>

<style>
	.white-box {
		width: 678rpx;
		margin: 25rpx 36rpx 0;
		padding: 0rpx 36rpx;
		border-radius: 5rpx;
		background-color: #FFFFFF;
	}

	.white-box .cu-form-group {
		padding: 0;
	}

	.cu-form-group .title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}

	.cu-form-group .picker {
		color: #CACACA;
		font-size: 30rpx;
	}

	.cu-form-group picker {
		margin-right: 0;
		padding-right: 20rpx;
		text-align: right;
	}

	.cu-form-group .input-holder {
		text-align: right;
		color: #CACACA;
		font-size: 30rpx;
	}

	.cu-form-group input {
		text-align: right;
	}

	.cu-form-group textarea {
		height: 95px;
	}

	button {
		width: 576rpx;
		margin: 180rpx 92rpx 20rpx;
	}

	.tips {
		width: 678rpx;
		margin: 0 36rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: #C9C9C9;
		line-height: 45rpx;
		text-align: center;
	}
</style>
